<template>
  <div>

    <el-card shadow="never" class="border-0">
      <el-tag @click="openInsertDialog()">新增</el-tag>
    </el-card>
    <br/>
    <el-card shadow="never" class="border-0">
      <el-table :data="ManualAuditPageList" border v-loading="loading">
        <el-table-column label="序列" width="80" align="center">
          <template #default="scope">
            {{scope.$index + 1}}
          </template>
        </el-table-column>
        <el-table-column prop="title" label="人工审核-标题" align="center"></el-table-column>
        <el-table-column prop="textOne" label="人工审核-文字1" align="center"></el-table-column>
        <el-table-column prop="textTwo" label="人工审核-文字2" align="center"></el-table-column>
        <el-table-column prop="textThree" label="人工审核-文字3" align="center"></el-table-column>
        <el-table-column prop="textFour" label="人工审核-文字4" align="center"></el-table-column>
        <el-table-column prop="textFive" label="人脉详情-标题" align="center"></el-table-column>
        <el-table-column prop="textSix" label="人脉详情-文字1" align="center"></el-table-column>
        <el-table-column prop="textSeven" label="人脉详情-文字2" align="center"></el-table-column>
        <el-table-column prop="textEight" label="人脉详情-文字3" align="center"></el-table-column>
        <el-table-column prop="textNine" label="人脉详情-文字4" align="center"></el-table-column>
        <el-table-column label="人工审核-左边图片">
          <template #default="scope">
            <el-tooltip class="box-item" effect="dark" content="点击可放大图片进行查看" placement="top-start">
              <el-image v-if="scope.row.imageOne" preview-teleported style="width: 50px; height: 30px"
                        :src="viewFristImg(scope.row.imageOne)"
                        :preview-src-list="splitStr(scope.row.imageOne)"></el-image>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column label="人工审核-右边图片">
          <template #default="scope">
            <el-tooltip class="box-item" effect="dark" content="点击可放大图片进行查看" placement="top-start">
              <el-image v-if="scope.row.imageTwo" preview-teleported style="width: 50px; height: 30px"
                        :src="viewFristImg(scope.row.imageTwo)"
                        :preview-src-list="splitStr(scope.row.imageTwo)"></el-image>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column label="意见反馈图片（存储路径">
          <template #default="scope">
            <el-tooltip class="box-item" effect="dark" content="点击可放大图片进行查看" placement="top-start">
              <el-image v-if="scope.row.feedbackImage" preview-teleported style="width: 50px; height: 30px"
                        :src="viewFristImg(scope.row.feedbackImage)"
                        :preview-src-list="splitStr(scope.row.feedbackImage)"></el-image>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="gongGaoTitle" label="公告栏-标题" align="center"></el-table-column>
        <el-table-column prop="gongGaoContent" label="公告栏-内容" align="center"></el-table-column>
        <el-table-column label="公告栏-群码图片">
          <template #default="scope">
            <el-tooltip class="box-item" effect="dark" content="点击可放大图片进行查看" placement="top-start">
              <el-image v-if="scope.row.gongGaoImage" preview-teleported style="width: 50px; height: 30px"
                        :src="viewFristImg(scope.row.gongGaoImage)"
                        :preview-src-list="splitStr(scope.row.gongGaoImage)"></el-image>
            </el-tooltip>
          </template>
        </el-table-column>
<!--        <el-table-column prop="imageOne" label="图片1（存储路径）" align="center"></el-table-column>
        <el-table-column prop="imageTwo" label="图片2（存储路径）" align="center"></el-table-column>
        <el-table-column prop="feedbackImage" label="意见反馈图片（存储路径）" align="center"></el-table-column>-->
        <el-table-column label="操作" align="center">
          <template #default="scope">
            <el-popconfirm title="真的要删除吗?" confirmButtonText="确认" cancelButtonText="取消" @confirm="deletingById(scope.row.id)">
              <template #reference>
                <el-tag type="danger">删除</el-tag>
              </template>
            </el-popconfirm>
            &nbsp;&nbsp;
            <el-tag type="warning" @click="openEditDialog(scope.row)">编辑</el-tag>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                     :page-size="queryParams.size" :page-sizes="[8, 16, 24,32]"
                     layout="total, sizes, prev, pager, next" :total="queryParams.total" style="float:right;">
      </el-pagination>
    </el-card>


    <el-dialog :visible.sync="insertDialog" :title="title">
      <el-form label-width="120px" :model="insertObj" :rules="rules" ref="form">
        <el-row>
          <el-col :span="12">
            <el-form-item label="人工审核-标题" prop="title">
              <el-input placeholder="请输入人工审核-标题" style="width: 240px" v-model="insertObj.title"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="人工审核-文字1" prop="textOne">
              <el-input placeholder="请输入人工审核-文字1" style="width: 240px" v-model="insertObj.textOne"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="人工审核-文字2" prop="textTwo">
              <el-input placeholder="请输入人工审核-文字2" style="width: 240px" v-model="insertObj.textTwo"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="人工审核-文字3" prop="textThree">
              <el-input placeholder="请输入人工审核-文字3" style="width: 240px" v-model="insertObj.textThree"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="人工审核-文字4" prop="textFour">
              <el-input placeholder="请输入人工审核-文字4" style="width: 240px" v-model="insertObj.textFour"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="人脉详情-标题" prop="textFive">
              <el-input placeholder="请输入人脉详情-标题" style="width: 240px" v-model="insertObj.textFive"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="人脉详情-文字6" prop="textSix">
              <el-input placeholder="请输入人脉详情-文字6" style="width: 240px" v-model="insertObj.textSix"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="人脉详情-文字7" prop="textSeven">
              <el-input placeholder="请输入人脉详情-文字7" style="width: 240px" v-model="insertObj.textSeven"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="人脉详情-文字8" prop="textEight">
              <el-input placeholder="请输入人脉详情-文字8" style="width: 240px" v-model="insertObj.textEight"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="人脉详情-文字9" prop="textNine">
              <el-input placeholder="请输入人脉详情-文字9" style="width: 240px" v-model="insertObj.textNine"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="公告栏-标题" prop="gongGaoTitle">
              <el-input placeholder="请输入公告栏-标题" style="width: 240px" v-model="insertObj.gongGaoTitle"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="公告栏-内容" prop="gongGaoContent">
              <el-input placeholder="请输入公告栏-内容" style="width: 240px" v-model="insertObj.gongGaoContent"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="人工审核-左边图片" prop="imageOne">
              <ImageUpload v-model="insertObj.imageOne" limit="1"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="人工审核-右边图片" prop="imageTwo">
              <ImageUpload v-model="insertObj.imageTwo" limit="1"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="意见反馈图片（存储路径）" prop="feedbackImage">
              <ImageUpload v-model="insertObj.feedbackImage" limit="1"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="公告栏-群码图片" prop="gongGaoImage">
              <ImageUpload v-model="insertObj.gongGaoImage" limit="1"/>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-button plain type="info" @click="resetInsertObj()">重置</el-button>
            <el-button plain type="warning" @click.native="submitInsert()">提交</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>


    <el-dialog :visible.sync="updateDialog" :title="title">
      <el-form label-width="120px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="人工审核-标题" prop="title">
              <el-input placeholder="请输入人工审核-标题" style="width: 240px" v-model="updateObj.title"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="人工审核-文字1" prop="textOne">
              <el-input placeholder="请输入人工审核-文字1" style="width: 240px" v-model="updateObj.textOne"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="人工审核-文字2" prop="textTwo">
              <el-input placeholder="请输入人工审核-文字2" style="width: 240px" v-model="updateObj.textTwo"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="人工审核-文字3" prop="textThree">
              <el-input placeholder="请输入人工审核-文字3" style="width: 240px" v-model="updateObj.textThree"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="人工审核-文字4" prop="textFour">
              <el-input placeholder="请输入人工审核-文字4" style="width: 240px" v-model="updateObj.textFour"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="人脉详情-标题" prop="textFive">
              <el-input placeholder="请输入人脉详情-标题" style="width: 240px" v-model="updateObj.textFive"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="人脉详情-文字6" prop="textSix">
              <el-input placeholder="请输入人脉详情-文字6" style="width: 240px" v-model="updateObj.textSix"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="人脉详情-文字7" prop="textSeven">
              <el-input placeholder="请输入人脉详情-文字7" style="width: 240px" v-model="updateObj.textSeven"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="人脉详情-文字8" prop="textEight">
              <el-input placeholder="请输入人脉详情-文字8" style="width: 240px" v-model="updateObj.textEight"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="人脉详情-文字9" prop="textNine">
              <el-input placeholder="请输入人脉详情-文字9" style="width: 240px" v-model="updateObj.textNine"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="公告栏-标题" prop="gongGaoTitle">
              <el-input placeholder="请输入公告栏-标题" style="width: 240px" v-model="updateObj.gongGaoTitle"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="公告栏-内容" prop="gongGaoContent">
              <el-input placeholder="请输入公告栏-内容" style="width: 240px" v-model="updateObj.gongGaoContent"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="人工审核-左边图片" prop="imageOne">
              <ImageUpload v-model="updateObj.imageOne" limit="1"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="人工审核-右边图片" prop="imageTwo">
              <ImageUpload v-model="updateObj.imageTwo" limit="1"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="意见反馈图片（存储路径）" prop="feedbackImage">
              <ImageUpload v-model="updateObj.feedbackImage" limit="1"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="公告栏-群码图片" prop="gongGaoImage">
              <ImageUpload v-model="updateObj.gongGaoImage" limit="1"/>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-button plain type="info" @click="resetUpdateObj()">重置</el-button>
            <el-button plain type="warning" @click="submitUpdate()">提交</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
  </div>

</template>
<script>
//引入api接口
import {deleteManualAuditPage, getManualAuditPage,insertManualAuditPage,updateManualAuditPage} from "@/api/manualAuditPage/manualAuditPage";
export default {
  name: "ManualAuditPage",
  data(){
    return {
      queryParams:{current:1,size:8,total:0},//查询对象
      ManualAuditPageList:[],//展示数据集合
      title:"",//弹窗标题
      insertDialog:false,//新增弹窗
      loading:true,
      //新增对象
      insertObj:{
        title:"",//标题
        textOne:"",//文字1
        textTwo:"",//文字2
        textThree:"",//文字3
        textFour:"",//文字4
        textFive:"",//文字5
        textSix:"",//文字6
        textSeven:"",//文字7
        textEight:"",//文字8
        textNine:"",//文字9
        imageOne:"",//图片1（存储路径）
        imageTwo:"",//图片2（存储路径）
        feedbackImage:"",//意见反馈图片（存储路径）
        gongGaoImage:"",//公告栏二维码图片
        gongGaoTitle:"",//公告栏二维码标题）
        gongGaoContent:"",//公告栏内容
      },
      updateDialog:false,//修改弹窗
      //修改对象
      updateObj:{
        title:"",//标题
        textOne:"",//文字1
        textTwo:"",//文字2
        textThree:"",//文字3
        textFour:"",//文字4
        textFive:"",//文字5
        textSix:"",//文字6
        textSeven:"",//文字7
        textEight:"",//文字8
        textNine:"",//文字9
        imageOne:"",//图片1（存储路径）
        imageTwo:"",//图片2（存储路径）
        feedbackImage:"",//意见反馈图片（存储路径）
        gongGaoImage:"",//公告栏二维码图片
        gongGaoTitle:"",//公告栏二维码标题）
        gongGaoContent:"",//公告栏内容
      },
      //规则
      rules: {
        title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
        textOne: [{ required: true, message: '请输入文字1', trigger: 'blur' }],
        textTwo: [{ required: true, message: '请输入文字2', trigger: 'blur' }],
        textThree: [{ required: true, message: '请输入文字3', trigger: 'blur' }],
        textFour: [{ required: true, message: '请输入文字4', trigger: 'blur' }],
        textFive: [{ required: true, message: '请输入文字5', trigger: 'blur' }],
        textSix: [{ required: true, message: '请输入文字6', trigger: 'blur' }],
        textSeven: [{ required: true, message: '请输入文字7', trigger: 'blur' }],
        textEight: [{ required: true, message: '请输入文字8', trigger: 'blur' }],
        textNine: [{ required: true, message: '请输入文字9', trigger: 'blur' }],
        imageOne: [{ required: true, message: '请输入图片1（存储路径）', trigger: 'blur' }],
        imageTwo: [{ required: true, message: '请输入图片2（存储路径）', trigger: 'blur' }],
        feedbackImage: [{ required: true, message: '请输入意见反馈图片（存储路径）', trigger: 'blur' }],
      }
    }
  },
  methods:{
    //显示首图
    viewFristImg(ele){
      if (ele != null && ele != ''){
        //拆分
        const imageArray = ele.split(",");
        //返回结果
        return imageArray[0];
      }
    },
    //拆分图片方法
    splitStr(ele) {
      //判断图片不为 null 且 图片不是 ''
      if (ele != null && ele != '') {
        //返回拆分结果
        return ele.split(",");
      } else {
        //否则返回 null
        return null;
      }
    },
    //查询方法
    getList(){
      //打开加载
      this.loading = true;
      //调用api接口
      getManualAuditPage(this.queryParams).then((res)=>{
        //关闭加载
        this.loading = false;
        //赋值展示数据
        this.ManualAuditPageList = res.data.records;
        //赋值展示总行数
        this.queryParams.total = res.data.total;
        //弹出提示
        this.$message({message: '加载完成', type: 'success'});
      })
    },
    //重置查询方法
    refReshQuery(){
      //重置数据
      this.queryParams.title = "";
      this.queryParams.textOne = "";
      this.queryParams.textTwo = "";
      this.queryParams.textThree = "";
      this.queryParams.textFour = "";
      this.queryParams.textFive = "";
      this.queryParams.textSix = "";
      this.queryParams.textSeven = "";
      this.queryParams.textEight = "";
      this.queryParams.textNine = "";
      this.queryParams.imageOne = "";
      this.queryParams.imageTwo = "";
      this.queryParams.feedbackImage = "";
      this.queryParams.createBy = "";
      this.queryParams.updateBy = "";
    },
    //重置新增对象
    resetInsertObj(){
      this.insertObj.title = "";
      this.insertObj.textOne = "";
      this.insertObj.textTwo = "";
      this.insertObj.textThree = "";
      this.insertObj.textFour = "";
      this.insertObj.textFive = "";
      this.insertObj.textSix = "";
      this.insertObj.textSeven = "";
      this.insertObj.textEight = "";
      this.insertObj.textNine = "";
      this.insertObj.imageOne = "";
      this.insertObj.imageTwo = "";
      this.insertObj.feedbackImage = "";
    },
    //重置修改对象
    resetUpdateObj(){
      this.updateObj.title = "";
      this.updateObj.textOne = "";
      this.updateObj.textTwo = "";
      this.updateObj.textThree = "";
      this.updateObj.textFour = "";
      this.updateObj.textFive = "";
      this.updateObj.textSix = "";
      this.updateObj.textSeven = "";
      this.updateObj.textEight = "";
      this.updateObj.textNine = "";
      this.updateObj.imageOne = "";
      this.updateObj.imageTwo = "";
      this.updateObj.feedbackImage = "";
    },
    //删除方法
    deletingById(id){
      //调用api接口
      deleteManualAuditPage(id).then((res)=>{
        //刷新表格
        this.getList();
        //弹出提示
        this.$message({
          message: '删除成功',
          type: 'success'
        });
      }).catch((error)=>{
        //弹出错误提示
        this.$message({
          message: error,
          type: 'error'
        });
      })
    },
    //新增弹窗打开方法
    openInsertDialog(){
      //数据重置
      this.resetInsertObj();
      //打开弹窗
      this.insertDialog = true;
      //标题
      this.title = "新增产品";
    },
    //打开修改弹窗
    openEditDialog(ele){
      //赋值
      this.updateObj = ele;
      //打开弹窗
      this.updateDialog = true;
      //标题
      this.title = "修改产品";
    },
    //提交修改
    submitUpdate(){
      console.log('提交对象:')
      console.log(this.updateObj)
      //调用修改接口
      updateManualAuditPage(this.updateObj).then((res)=>{
        //刷新表格
        this.getList();
        //关闭弹窗
        this.updateDialog = false;
        //弹出错误提示
        this.$message({
          message: "修改成功",
          type: 'success'
        });
      }).catch((error)=>{
        //弹出错误提示
        this.$message({
          message: error,
          type: 'error'
        });
      })
    },
    //提交新增
    submitInsert(){
      this.$refs.form.validate((valid) => {
        if (valid) {
          //调用api接口
          insertManualAuditPage(this.insertObj).then((res)=>{
            //刷新表格
            this.getList();
            //关闭弹窗
            this.insertDialog = false;
          }).catch((error)=>{
            //弹出错误提示
            this.$message({
              message: error,
              type: 'error'
            });
          })
        }else{
          //弹出错误提示
          this.$message({
            message: "请将所有必填项进行填写",
            type: 'error'
          });
        }
      })
    },
    //页码更变
    handleCurrentChange(index){
      //赋值数据
      this.queryParams.current = index;
      //调用查询
      this.getList();
    },
    //行数更变
    handleSizeChange(size){
      //重置到第一行
      this.queryParams.current = 1;
      //赋值数据
      this.queryParams.size = size;
      //调用查询
      this.getList();
    }
  },
  created(){
    //获取集合
    this.getList();
  }
}
</script>
